<template>
	<view>
		
		<view v-for="(item,index) in notifications" :key="index">
			<view class="cflex wrap_nb" v-if="item.read_at">
				<view class="dflex aic pb12 jcsb" @click="toMemberIndex" :data-currentuid="item.data.user_id">
					<view class="message_image">
						<u-avatar :src="item.data.user_avatar" size="45" mode='aspectFill'></u-avatar>
					</view>
					<view class="cflex ml15 fg1 mr12">
						<text class="f12">{{ item.data.user_name }}</text>
						<text class="f10 mt5 u-line-1 ca3a3a3">{{ $u.timeFrom(Date.parse(item.created_at, false)) }}点赞了你的瞬间 </text>
					</view>	
					<view class="f12 normal_follow_button">
						TA的主页
					</view>		
				</view>
				<u-line></u-line>
			</view>
			<view class="cflex wrap_nb bg_eee" v-else>
				<view class="dflex aic pb12 jcsb" @click="readMessage" :data-currentuid="item.data.user_id" :data-likeid="item.id" :data-readindex="index">
					<view class="message_image p_relative">
						<view class="unread p_fix"></view>
						<u-avatar :src="item.data.user_avatar" size="45" mode='aspectFill'></u-avatar>
					</view>
					<view class="cflex ml15 fg1 mr12">
						<text class="f12">{{ item.data.user_name }}</text>
						<text class="f10 mt5 u-line-1 ca3a3a3">{{ $u.timeFrom(Date.parse(item.created_at, false)) }}关注了你 </text>
					</view>	
					<view class="f12 normal_follow_button">
						TA的主页
					</view>		
				</view>
				<u-line></u-line>
			</view>
		</view>
		
		<view class="empty_list" v-if="empty" style="margin-top: 170px;">
			<u-empty mode="list" text="还没有任何消息,多多发帖互动哦~"></u-empty>
		</view>
		
		<bottomMenu ref="bottom"></bottomMenu>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				empty : false,
				notifications : [],
				currentu_id : '',
				like_id : '',
				readindex : ''
			}
		},
		onLoad:function(){
			this.getNotification();
		},
		methods: {
			getNotification() {
				uni.showLoading({
					title:"加载中...."
				})
				uni.request({
				url:uni.getStorageSync('domain') + '/api/v1/user/notifications/UserFollower',					
					method: 'GET',
					header: {
						'Accept': 'application/json',
						'Authorization' : 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					success: res => {
						if(res.statusCode == 401) {
							uni.redirectTo({
								url:'/pages/member/member'
							})
						} else {						
							if(res.data.notifications.total == 0) {
								this.empty = true
							} else {
								this.notifications = res.data.notifications.data
							}
						}						
						console.log('loadIndexNew', this.notifications);
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			readMessage(e) {
				this.like_id = e.currentTarget.dataset.likeid;
				this.currentu_id = e.currentTarget.dataset.currentuid;
				this.readindex = e.currentTarget.dataset.readindex
				uni.showLoading({
					title:"加载中...."
				})
				uni.request({
				url:uni.getStorageSync('domain') + '/api/v1/user/read/notifications/' + this.like_id,					
					method: 'post',
					header: {
						'Accept': 'application/json',
						'Authorization' : 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					success: res => {
						if(res.statusCode == 401) {
							uni.redirectTo({
								url:'/pages/member/member'
							})
						} else {						
							if(res.data.status == 'success') {
								this.notifications[this.readindex].read_at = "now"
								this.$refs.bottom.subCount()
								setTimeout(() => {
									this.toMemberIndex()
									uni.hideLoading();
								},700)
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toMemberIndex(e) {				
				if(this.like_id != "" & this.currentu_id != "") {					
					uni.navigateTo({
						url:"/pages/member/memberStranger?uid=" + this.currentu_id,
					})
				} else {
					this.currentu_id = e.currentTarget.dataset.currentuid;
					uni.navigateTo({
						url:"/pages/member/memberStranger?uid=" + this.currentu_id,
					})
				}
			},
		}
	}
</script>

<style>
	.message_image {
		width: 100rpx;
		display: flex;
	}
</style>
